<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>微博仿制</title>
	<style>
		#out{
			width:500px;
			border:2px solid black;
		}
		#userName{
			display: inline-block;
			width: 150px;
			height: 30px;
			margin-bottom: 20px;
			float: left;
			margin-left: 5px;
		}
		.userIcon{
			padding-left: 10px;
		}
		.userIcon>img{
			cursor: pointer;
			width: 30px;
			height: 30px;
			padding-left: 4px;
			border: 1px solid transparent;
		}
		img.xuanzhong{
			border: 1px solid red;
		}

		.text1{
			text-align: center;
		}
		#but1{
			width: 112px;
			height: 30px;
			background-image: url("img/1.png");
			float: right;
			margin-right: 20px;
			margin-top: 15px;
		}
		.fontNum{
			float: right;
			margin-right: 20px;
		}
		#num1{
			font-size: 40px;
		}
		.center{
			margin-top: 80px;
			margin-left: 10px;
			width: 96%;
			background-color: lightgray;
			height: 30px;
		}
		.title1{
			background-color: white;
			margin-left: 10px;
		}
		.center>div{
			height: 8px;
		}
		.min{
			margin-left: 15px;
			margin-top: 10px;
			width: 470px;
			word-wrap:break-word;
			border-bottom: 1px dashed lightgray;
			margin-bottom: 10px;
		}
		.photo{
			float: left;
			width: 50px;
			height: 50px;
		}
		.show{
			margin-left:10px;
			display: inline-block;
			width: 400px;
		}
		.show>p{
			margin: 0;
			padding: 0;
			padding-bottom: 10px;
			color: gray;
		}
		.user_name{
			color: skyblue;
		}
		.delect{
			display: inline-block;
			float: right;
			width: 50px;
			color: red;
			visibility: hidden;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h2>页面设计图</h2>
	<div id="out">
		<h3>来，说说你在做什么，想什么</h3>
		<input type="text" placeholder="请输入用户名" id="userName">
		<span class="userIcon">
			<img src="img/2.gif" alt="" class="xuanzhong" onclick="iconOnclick(this)">
			<img src="img/3.gif" alt="" onclick="iconOnclick(this)">
			<img src="img/4.gif" alt="" onclick="iconOnclick(this)">
			<img src="img/5.gif" alt="" onclick="iconOnclick(this)">
			<img src="img/6.gif" alt="" onclick="iconOnclick(this)">
			<img src="img/7.gif" alt="" onclick="iconOnclick(this)">
			<img src="img/8.gif" alt="" onclick="iconOnclick(this)">
			<img src="img/9.gif" alt="" onclick="iconOnclick(this)">
		</span>
		<div class="text1">
			<textarea name="" id="text1" cols="75" rows="10"></textarea>
		</div>
		<input type="button" id="but1" onclick="play()">
		<span class="fontNum">
			<span id="font1">还能输入</span>
			<span id="num1">150</span>
			<span>个字</span>
		</span>
		<div class="center">
			<div></div>
			<span class="title1">大家在说</span>
		</div>
	</div>
	<script src="js/1.js"></script>
</body>
</html>